<template>
  <div style="margin-top: 10px">
<el-table :cell-class-name="addSeparate" :data="orderList" stripe style="width: 100%; text-align: center;" @selection-change="handleSelectionChange">
	<el-table-column type="selection" width="55"></el-table-column>
     
      <el-table-column prop="orderNo" label="订单编号"></el-table-column>
      <el-table-column label="订单状态">
		  <template slot-scope="scope">
			<span v-if="scope.row.payStatus=='1'">已支付</span>
			<span v-else>待付款</span>
		  </template>
	  </el-table-column>
      <el-table-column prop="totalPrice" label="支付金额"></el-table-column>
	  
	  <el-table-column prop="orderItems" label="订单商品">
		  <template slot-scope="scope">
			<div v-for="(item, index) in scope.row.orderItems" :key="index">
			  <div class="orderItem-box">
				<div style="width: 30%;">
					<img style="width: 98%;" :src="item.productImage"  alt=""/>
				</div> 
				 <div style="width: 68%;">
					 <p>商品名: {{ item.productName }}</p>
					 <p>单价: {{ item.productPrice }} &nbsp;数量: {{ item.number}}</p>
					 <!-- <!-- <p>描述: {{item.productDes }}</p> -->
				 </div>
			  </div>
			  <hr/>
			</div>
		 </template>
	  </el-table-column>
	  
	  <el-table-column prop="createTime" label="下单时间"></el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="200">
		<template slot-scope="scope">
			<el-button
			    size="mini"
				type="primary"
			    @click="handleSubmit(scope.row.orderNo)">支付</el-button>
			<el-button
			    size="mini"
			    type="danger"
			    @click="handleDelete(scope.row.orderId)">删除</el-button>
		</el-popconfirm>
		</template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px">
      <div style="display: flex; background-color: white; padding: 10px">
        <div style="flex: 1; padding-left: 20px; color: #999; font-size: 12px">
          <div>共 <span style="color: red; font-size: 20px">{{ count }}</span> 订单</div>
        </div>
      </div>



    </div>
  </div>
</template>

<script>	
export default{
	name:"Orders",
	data(){
		return{
			userNo:this.$VuexStore.state.token.userNo,
			orderList:[],
			count: 0,
		}
	},
	created(){
		this.initOrders();
	},
	methods:{
		initOrders(){
			var url = "/api/orders/selectOrders/" + this.userNo;
			this.$Request
				.fetch(url)
				.then((result) => {
					this.orderList = result.data;
					this.count = this.orderList.length;
					console.log(this.orderList[0]);
				})
				.catch((error) => {
					this.$message.error(error);
				});
		},
		handleSelectionChange: function() {
			
		},
		addSeparate(row) {
				return "separator-border"
		},
		// 提交订单
		handleSubmit(orderNo) {
			this.$Request
				.fetch_("/api/orders/submitOrder/" + orderNo + "/" + this.userNo, 'put', {})
				.then((result) => {
					if (result.status == this.$Request.OK_CODE) {
					this.$message({
						message: "修改订单状态成功",
						type: "success",
						duration: 2 * 1000,
					});
					this.initOrders();
					} else {
						this.$message.error(result.message);
					}
				})
				.catch((error) => {
					this.$message.error(error);
				});
		},
		// 删除订单
		handleDelete(orderNo) {
			this.$Request
				.fetch_("/api/orders/selectOrders/" + orderNo, 'delete', {})
				.then((result) => {
					if (result.status == this.$Request.OK_CODE) {
					this.$message({
						message: "删除成功",
						type: "success",
						duration: 2 * 1000,
					});
					this.initOrders();
					} else {
						this.$message.error(result.message);
					}
				})
				.catch((error) => {
					this.$message.error(error);
				});
		},
	}
}	
</script>
<style>
	.orderItem-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.separator-border {
		border-right: 1px solid #eeeff2!important;
	}
</style>
